<template>
  <div class="home">
    <div class="soso-house">
      <input class="house-num" id="house-num" v-model="search_house_id" placeholder="输入朋友的房号" type="text" @input="get_house_id" />
      <div class="soso-num"
           @click="search_house">搜索</div>
    </div>
    <div class="create-house"
         @click="create_house">创建新房</div>
    <button open-type='share'
            class="create-house">分享给好友</button>
    <div class="game-tip">
      <div>1、创建一个 或者 搜索进入一个朋友的房间</div>
      <div> 2、告诉朋友房号或者分享给好友，等待朋友进入（需满足2人）</div>
    </div>
    <div class="nothing">
      没有查询到该房间
    </div>
    <i-message id="message" />
    <div class="container"
         v-if="spinShow">
      <i-spin fix></i-spin>
    </div>
    <get-user-info-model :hide-get-user-info-model="hide_getUserInfo_model"
                         @agree="agree"
                         @cancle="cancle" />
  </div>
</template>

<script>
import store from '../../store';
import { $Message } from '../../../static/iview/base/index';
// const { $Message } = require('../../../iview/base/index')
export default {
    data() {
        return {
            logs: [],
            hide_getUserInfo_model: true,
            userInfo: null,
            is_show_mask: false,
            spinShow: false, // 加载中
            search_house_id: '',
            wait_task_arr: []
        };
    },
    computed: {
        G() {
            return store.state.globalData;
        }
    },

    methods: {
        cancle() {
            this.spinShow = false;
            this.hide_getUserInfo_model = true;
        },
        async agree(res) {
            this.spinShow = false;
            this.hide_getUserInfo_model = true;
            if (res.detail.detail.errMsg === 'getUserInfo:ok') {
                await store.dispatch('get_info');
                this.wait_task_arr.forEach(value => {
                    this[value]();
                });
                this.wait_task_arr = [];
            }
        },
        check_info() {
            return new Promise((resolve, reject) => {
                wx.getSetting({
                    success: async res => {
                        if (res.authSetting['scope.userInfo']) {
                            // 已经授权，可以直接调用 getUserInfo 获取头像昵称
                            if (!this.G.userInfo || !this.G.openid) {
                                await store.dispatch('get_info');
                                this.wait_task_arr.forEach(value => {
                                    this[value]();
                                });
                                this.wait_task_arr = [];
                                resolve();
                            }
                        } else {
                            this.hide_getUserInfo_model = false;
                            resolve();
                        }
                    }
                });
            });
        },
        // 创建房间
        create_house() {
            this.spinShow = true;
            if (this.G.userInfo && this.G.openid) {
                wx.request({
                    url: `${this.G.hua_base}create_house`,
                    method: 'GET',
                    success: res => {
                        this.spinShow = false;
                        if (res.data.state === 401) {
                            wx.redirectTo({
                                url: `../ready/main?house_id=${res.data.data}`
                            });
                        }
                    }
                });
            } else {
                const arr = Object.assign([], this.wait_task_arr);
                arr.push('create_house');
                this.wait_task_arr = arr;
                this.check_info();
            }
        },
        search_house() {
            this.spinShow = true;
            if (this.G.userInfo && this.G.openid) {
                if (this.search_house_id === '') {
                    return;
                }
                wx.request({
                    url: `${this.G.hua_base}search_join_house`,
                    method: 'GET',
                    data: {
                        type: 'search',
                        house_id: this.search_house_id,
                        openid: this.G.openid
                    },
                    success: res => {
                        this.spinShow = false;
                        const data = res.data
                        if (data.state === 401) {
                            wx.redirectTo({
                                url: `../ready/main?house_id=${this.search_house_id}`
                            });
                        } else if (data.state === 402) {
                            // 房间已经开始，并且之前有加入
                            // 0准备1开始,2计分中，3已结束，4休息整理中
                            if (data.data.status === 0) {
                                wx.redirectTo({
                                    url: `../ready/main?house_id=${this.search_house_id}`
                                });
                            } else if (data.data.status !== 3) {
                                $Message({
                                    content: '正在进入游戏',
                                    type: 'success',
                                    duration: 2 // 持续的时间
                                });
                                wx.redirectTo({
                                    url: `../ongoing/main?house_id=${this.search_house_id}`
                                });
                            } else {
                                $Message({
                                    content: '游戏已结束',
                                    type: 'warning',
                                    duration: 2 // 持续的时间
                                });
                            }
                        } else {
                            $Message({
                                content: data.msg || '没有查到该房间',
                                type: 'error',
                                duration: 2 // 持续的时间
                            });
                        }
                    }
                });
            } else {
                const arr = Object.assign([], this.wait_task_arr);
                arr.push('search_house');
                this.wait_task_arr = arr;
                this.check_info();
            }
        },
        // 输入搜索房间
        get_house_id(e) {
            // var val = e.detail.value;
            // this.setData({
            //   search_house_id: val
            // });
        },

    },
    onShareAppMessage: function(res) {
        return {
            title: '快来和我玩你画我猜',
            path: '/pages/index/main'
        };
    },
    created() {
    // 调用应用实例的方法获取全局数据
        this.check_info();
    },
    // 捕获 app error
    onError(err) {
        console.log('ongoing-error:' + err);
    }
};
</script>

<style scoped>
.home {
  width: 270px;
  margin: 0 auto;
  position: relative;
}

.nothing {
  display: none;
  position: absolute;
  width: 80%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #fff;
  top: 120px;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #353535;
  z-index: 3;
  border-radius: 3px;
}
.house-num {
  border: 1px solid #e64340;
  width: 200px;
  height: 35px;
  line-height: 35px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  display: inline-block;
  vertical-align: middle;
}
.soso-num {
  width: 60px;
  height: 37px;
  background-color: #e64340;
  color: #fff;
  text-align: center;
  line-height: 35px;
  display: inline-block;
  vertical-align: middle;
}
.create-house {
  width: 260px;
  background: #1aad19;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}
.soso-house {
  width: 100%;
  text-align: center;
  margin: 40px auto;
  margin-top: 80px;
}
.game-tip {
  color: #acacac;
  margin-top: 40px;
}
</style>
